<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2019-6-13
  Time: 11:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="../common.jsp"%>
<script type="application/javascript" src="${ctx}/static/echarts/echarts.min.js"></script>
<script type="application/javascript" src="${ctx}/static/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="${ctx}/static/bootstrap/css/bootstrap.min.css"/>
<html>
<head>
    <title>商务委资金使用情况</title>
</head>
<style type="text/css">
    .query{
        width: 100%;
        height: 10%;
    }

    .chart_class{
        width: 100%;
        height: 90%;
    }
    .div1{
        float: left;
        width: 40%;
    }
    .div1 label{
        display: inline-block;
        margin-top: 16px;

    }
    .div1 select{
        margin-bottom: 10px;
        margin-left: 10px;
    }

    .btn_div{
        float: left;
        margin-top: 16px
    }
</style>
<body>
   <div class="query">
       <form id="query" class="navbar-form navbar-left" role="search">
           <div class="div1">
               <label class="sr-only navbar-text">查询年度</label>
               <select name="year" class="col-lg-2 form-control input-sm">
                   <option value="2017">2017</option>
                   <option value="2018">2018</option>
                   <option value="2019">2019</option>
               </select>
           </div>

           <div class="div1">
               <label class="sr-only navbar-text">图形样式</label>
               <select name="type" class="col-lg-2 form-control input-sm">
                   <option value="1">饼图</option>
                   <option value="2">条形图</option>
                   <option value="3">仪表图</option>
               </select>
           </div>

           <div class="btn_div">
              <button type="button" onclick="query()" class="btn btn-default">查询</button>
           </div>
       </form>
   </div>

   <div id="tt" class="chart_class">

   </div>

   <script type="application/javascript">
       var tt =echarts.init(document.getElementById("tt"));
       $(function(){
           query();
       });

       function query(){
           var json = $("#query").serializeJSON();
           $.ajax({
               url: ctx+"/charts/swwcharts",
               type : "POST",
               data:json,
               success : function(data) {
                   if (data.status == true) {
                       tt.setOption(JSON.parse(data.respObj));
                   } else {
                       $.messager.alert("操作提示", data.respMsg, "error");
                   }
               },
               error : function() {
                   $.messager.alert("操作提示", "操作失败！", "error");
               }
           });
       }
   </script>
</body>
</html>
